<template>
    <div class="PurchaseView">
        <header>
            <!-- 头部导航 -->
       <van-nav-bar title="嗨购商城" left-text="返回" left-arrow>
            <template #right>
                <van-popover v-model="showPopover" trigger="click" :actions="actions" placement="bottom-end" theme="dark" @select="onSelect">
                    <template #reference>
                        <van-icon name="ellipsis" size="24" color="black" />
                    </template>
                </van-popover>
            </template>
            <div>aaaa</div>
            <template #left>
                <van-icon name="arrow-left"  @click="$router.push('/user')" size="24" color="black" ></van-icon>
            </template>
        </van-nav-bar>
        <!-- 分享模块 -->
        <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
        />
        </header>
        <nav>
             <van-tabs v-model="active">
            <van-tab title="全部"></van-tab>
            <van-tab title="待付款"></van-tab>
            <van-tab title="待收货"></van-tab>
            <van-tab title="已完成"></van-tab>
            </van-tabs>
        </nav>
        <router-view></router-view>
    </div>
</template>
<script>
import Vue from 'vue'
import { NavBar, ShareSheet, Popover, Icon, Tab, Tabs } from 'vant'
Vue.use(NavBar)
Vue.use(ShareSheet)
Vue.use(Popover)
Vue.use(Icon)
Vue.use(Tab)
Vue.use(Tabs)
export default {
  data () {
    return {
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' }
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' }
        ]
      ],
      showPopover: false,
      actions: [{ text: '首页', icon: 'home-o', index: 0 }, { text: '分类搜素', icon: 'apps-o', index: 1 }, { text: '我的嗨购', icon: 'user-o', index: 2 }, { text: '浏览记录', icon: 'clock-o', index: 3 }, { text: '我的关注', icon: 'like-o', index: 4 }, { text: '分享', icon: 'guide-o', index: 5 }],
      showShare: false,
      active: 0
    }
  },
  methods: {
    // 下拉选择列表
    onSelect (action) {
      switch (action.index) {
        case 0:
          this.$router.push('/home')
          break
        case 1:
          this.$router.push('/kind')
          break
        case 2:
          this.$router.push('/user')
          break
        case 3:
          console.log('我是浏览记录模块')
          break
        case 4:
          console.log('我是关注模块')
          break
        case 5:
          console.log('我是分享模块')
          this.showShare = true
          break
      }
    }
  },
  watch: {
    active: {
      handler (newval) {
        switch (newval) {
          case 0:
            this.$router.push('/purchase/stop1')
            break
          case 1:
            this.$router.push('/purchase/stop2')
            break
          case 2:
            this.$router.push('/purchase/stop3')
            break
          case 3: break
        }
      }
    }
  },
  mounted () {
    this.active = this.$route.params.id
  }
}
</script>
<style lang="stylus" scoped>
.PurchaseView
    flex 1
    display flex
    flex-direction column
</style>
